import React, { Component, PropTypes } from 'react';
import ItemTypes from './ItemTypes';
import { DragSource, DropTarget } from 'react-dnd';
import {moving,overing} from '../../actions/index';
import Dialog from 'qnui/lib/dialog';
const cardSource = {
  beginDrag(props,monitor) {
    return {
      id: props.id,
      originalIndex: props.findCard(props.id).index
    };
  },

  endDrag(props, monitor) {
    const { id,dataSource } = props;
	props.moveItem(id, dataSource[0].atIndex);

  }
};
const cardTarget = {
  hover(props){
	  const {index:atIndex} = props.findCard(props.id);
	  props.dispatch(overing(atIndex));
  }
};

@DropTarget(ItemTypes.CARD, cardTarget, (connect,monitor,component) => ({
  isOver:monitor.isOver(),
  connectDropTarget: connect.dropTarget()
}))
@DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging()
}))
export default class previewToolBase extends Component {
  static propTypes = {
    connectDragSource: PropTypes.func.isRequired,
    connectDropTarget: PropTypes.func.isRequired,
    isDragging: PropTypes.bool.isRequired,
    id: PropTypes.any.isRequired,
    showIcon: PropTypes.any.isRequired,
    findCard: PropTypes.func.isRequired
  };
  componentWillMount(){
	const {isDragging,id,dataSource,dispatch} = this.props;
	const movingId = dataSource[0].movingId;
	if(isDragging && movingId!=currentIndex){
		// 向其他预览模块传递dragOver的id
		dispatch(moving(currentIndex));
	}else if(id==1||id==2){
		// id为1是dragOver状态暂存，id为2是占位符
		dispatch(moving(0));
	}
  }
  removeItem(currentIndex){
	  Dialog.confirm({
			content: '您确实要删除这个组件吗？删除后不可恢复哦',
			closable: false,
			onOk: () => {
				this.props.removeItem(currentIndex);
			}
		});
  }
  render() {
    const { toggleIcon,showIcon,findCard,dataLength,isOver,id,preview,isDragging, connectDragSource, connectDropTarget,moveItem,removeItem } = this.props;
	const {card,index:currentIndex} = findCard(id);
	const opacity = isDragging ? 0.4 : 1;
	const dragBox=isOver?(isDragging?"hide":"dragBox"):"hide";
	const movingId = this.props.dataSource[0].movingId;
	const atIndex = this.props.dataSource[0].atIndex;
	const holderClass = this.props.dataSource[1].cls;
	
	let holder = "";
	switch(id){
		case 1:
			holder = "hide";
		break;
		case 2: 
			holder = (dataLength<=2) ?holderClass:"module-placeholder-hover";
		break;
		default:
			holder = showIcon ? 'active-widget':'';
		break;
	}
	
	const dragBefor = ((movingId>currentIndex && id>2) || movingId==0)?<div className={dragBox}></div>:"";
	const dragAfter = (movingId<currentIndex && id>2 && movingId>0)?<div className={dragBox}></div>:"";
	
	const showIconClass = showIcon && id>2 ? 'icon show':'icon';
	const up = (currentIndex==2)?"":<div className="up" onClick={()=>this.props.moveItem(id,currentIndex-1)} ></div>;
	const down = (currentIndex==this.props.dataSource.length-1)?"":<div className="down" onClick={()=>this.props.moveItem(id,currentIndex+1)} ></div>;

	return connectDragSource(connectDropTarget(
      <div className={holder} style={{ opacity }} onClick={()=>toggleIcon(id)} >
	    <div className={showIconClass} > 
			  {up}{down}
			  <div className="del" onClick={this.removeItem.bind(this,currentIndex)}></div>
		</div>
		{dragBefor}
        {preview}
		{dragAfter}
      </div>
    ));
  }
}